<template>
  <div class="main_container">
    <div id="mapchart" style="width: 100%; height: 100%" ref="mapchart"></div>
  </div>
</template>

<script setup lang="ts">
import { onMounted, ref } from 'vue';
import chinaMap from '@/assets/map/china.json';
import * as echarts from 'echarts';
import 'echarts/theme/macarons';
import { getDevice } from '@/api/home';

let chart: any;
let resize: any;
const mapchart = ref();
onMounted(() => {
  getData();
});
const getData = async () => {
  const res = await getDevice();
  if (res.code == 200) {
    let mapData = res.data.map((item: any) => {
      return [item.longitude, item.latitude];
    });
    init(mapData);
  }
};
const init = (data: any) => {
  // 获取容器元素
  // 初始化图表实例
  if (!mapchart.value) return;
  chart = echarts.init(mapchart.value);

  echarts.registerMap('china', chinaMap);
  let option = {
    tooltip: {
      show: false,
      trigger: 'item',
      axisPointer: {
        type: 'shadow',
      },
    },
    // title: [{
    //     text: '地图'
    // }],
    // grid: {
    //     height: '100%',
    //     width: '100%'
    // },
    geo: [
      {
        map: 'china',
        top: '8%',
        left: '10%',
        roam: false,
        width: '80%',
        height: '80%',
        aspectScale: 0.75, //长宽比
        zoom: 1.1,
        scaleLimit: {
          min: 1,
          max: 3,
        },
        selected: false,
        silent: true,
        label: {
          normal: {
            fontSize: 12,
            show: true,
            color: '#fff',
          },
        },
        emphasis: {
          disabled: true,
        },
        itemStyle: {
          normal: {
            areaColor: {
              type: 'radial',
              x: 0.5,
              y: 0.5,
              r: 0.8,
              colorStops: [
                {
                  offset: 0,
                  color: '#09132c', // 0% 处的颜色
                },
                {
                  offset: 1,
                  color: '#274d68', // 100% 处的颜色
                },
              ],
              globalCoord: true, // 缺省为 false
            },
            shadowColor: 'rgba(39, 77, 104,5)',
            shadowOffsetX: 5,
            shadowOffsetY: 6,
          },
        },
      },
    ],

    series: [
      {
        type: 'map',
        roam: false,
        top: '8%',
        left: '10%',
        width: '80%',
        height: '80%',
        zoom: 1.1,
        label: {
          normal: {
            show: true,
            textStyle: {
              color: '#fff',
            },
          },
        },
        emphasis: {
          disabled: true,
        },
        silent: true,
        itemStyle: {
          normal: {
            borderColor: 'rgb(147, 235, 248)',
            borderWidth: 1,
            areaColor: {
              type: 'radial',
              x: 0.5,
              y: 0.5,
              r: 0.8,
              colorStops: [
                {
                  offset: 0,
                  color: '#09132c', // 0% 处的颜色
                },
                {
                  offset: 1,
                  color: '#274d68', // 100% 处的颜色
                },
              ],
              globalCoord: true, // 缺省为 false
            },
          },
        },

        //     roam: false,
        map: 'china', //使用
        // data: this.difficultData //热力图数据   不同区域 不同的底色
      }, //地图线的动画效果
      {
        type: 'scatter',
        coordinateSystem: 'geo', //坐标系统
        data: data,
        //地图点的样式；颜色，大小
        symbolSize: 10,
        itemStyle: {
          color: '#1DE9B6',
          shadowBlur: 2,
          shadowColor: '#333',
        },
      },
      //涟漪特效
    ],
  };
  chart.setOption(option);
  addEventListener('resize', function () {
    chart && chart.resize();
  });
};
</script>

<style lang="scss" scoped>
.main_container {
  width: 100%;
  height: 100%;
}
</style>
